<%-- register-success.jsp --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册成功 - 电商助农平台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --gradient-start: #7ed56f;
            --gradient-end: #28b485;
            --accent-color: #ff6b6b;
        }

        body {
            background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            animation: gradientAnim 15s ease infinite;
            background-size: 400% 400%;
        }

        @keyframes gradientAnim {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .success-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 3rem 2rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
            transform: translateY(0);
            transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
            text-align: center;
            max-width: 560px;
            margin: 1rem;
            backdrop-filter: blur(8px);
            position: relative;
            overflow: hidden;
        }

        .success-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        }

        .success-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                    45deg,
                    transparent 25%,
                    rgba(255, 255, 255, 0.1) 50%,
                    transparent 75%
            );
            animation: shine 3s infinite linear;
        }

        @keyframes shine {
            100% { transform: rotate(360deg); }
        }

        .success-icon {
            font-size: 4.5rem;
            color: var(--gradient-end);
            margin-bottom: 1.5rem;
            animation: bounceIn 1s ease;
        }

        .success-title {
            font-size: 2rem;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 1rem;
            position: relative;
        }

        .success-text {
            color: #666;
            font-size: 1.1rem;
            margin-bottom: 2rem;
            line-height: 1.6;
        }

        .btn-success {
            background: linear-gradient(135deg, var(--gradient-end), var(--gradient-start));
            border: none;
            border-radius: 12px;
            padding: 0.8rem 2rem;
            font-size: 1.1rem;
            font-weight: 600;
            color: white;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-success::after {
            content: '';
            position: absolute;
            top: -180%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: rgba(255, 255, 255, 0.2);
            transform: rotate(45deg);
            transition: all 0.4s ease;
        }

        .btn-success:hover::after {
            left: 100%;
        }

        .btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(40, 180, 133, 0.3);
        }

        @keyframes bounceIn {
            0% { transform: scale(0); opacity: 0; }
            60% { transform: scale(1.1); opacity: 1; }
            100% { transform: scale(1); }
        }
    </style>
</head>
<body>
<div class="success-card">
    <!-- 添加成功标志 -->
    <div class="success-icon">
        <i class="fas fa-check-circle"></i>
    </div>

    <h2 class="success-title">
        注册成功！
        <div class="w-100 mt-2" style="height: 3px; background: linear-gradient(90deg, transparent, var(--gradient-end), transparent);"></div>
    </h2>

    <p class="success-text">
        欢迎加入助农大家庭，您的账户已经成功开通<br>
        <span class="text-muted small" style="font-size: 0.9rem;">ID：<%= request.getAttribute("userId") %></span>
    </p>

    <!-- 新增功能区域 -->
    <div class="d-grid gap-3">
        <a href="login.jsp" class="btn btn-success">
            <i class="fas fa-sign-in-alt"></i>
            立即登录
        </a>
        <a href="management-Index.jsp" class="btn btn-link text-decoration-none" style="color: var(--gradient-end);">
            返回首页 →
        </a>
    </div>

    <!-- 新增进度提示 -->
    <div class="mt-4 text-muted small">
        <i class="fas fa-clock"></i>
        <span id="countdown">5秒后自动跳转登录页</span>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 自动跳转功能
    let seconds = 5;
    const countdownElement = document.getElementById('countdown');
    const countdownInterval = setInterval(() => {
        seconds--;
        countdownElement.textContent = `${seconds}秒后自动跳转登录页`;
        if (seconds <= 0) {
            clearInterval(countdownInterval);
            window.location.href = 'login.jsp';
        }
    }, 1000);
</script>
</body>
</html>
